<template>
    <div>
        <el-descriptions title="基本信息" :column="5">
            <el-descriptions-item label="项目名称" :span="5">{{ ruleForm.title }}</el-descriptions-item>
            <el-descriptions-item label="合同金额">{{ ruleForm.price }}</el-descriptions-item>
            <el-descriptions-item label="结算金额">{{ ruleForm.settlement }}</el-descriptions-item>
            <el-descriptions-item label="开工日期">{{ ruleForm.start_date }}</el-descriptions-item>
            <el-descriptions-item label="竣工日期">{{ ruleForm.end_date }}</el-descriptions-item>
            <el-descriptions-item :rowspan="2"><component @click="isQrcode = true" :is="QrcodeGenerator" :size="80" :isShow="false" :content = id /></el-descriptions-item>
            <el-descriptions-item label="已施工天">{{ ruleForm.build_date }}</el-descriptions-item>
            <el-descriptions-item label="剩余天　">{{ ruleForm.remaining_date }}</el-descriptions-item>
            <el-descriptions-item label="合同工期">{{ ruleForm.work_period }}</el-descriptions-item>
        </el-descriptions>
        <!-- <div class="segmented"><el-segmented class="mt10" v-model="value" :options="options" /></div> -->
        <el-tabs v-model="value" type="card" class="custom-tabs">
            <el-tab-pane v-for="item in options" :key="item" :label="item" :name="item"></el-tab-pane>
            <div class="contents">
                <component :is="edit" v-if="value == '项目信息'" />
                <component :is="apply" v-if="value == '通用申请报告'" />
                <component :is="landlord" v-if="value == '业主合同'" />
                <component :is="user" v-if="value == '项目人员'" />
                <component :is="disclosure" v-if="value == '质量管理'" />
                <component :is="safe" v-if="value == '安全管理'" />
                <component :is="schedule" v-if="value == '进度管理'" />
                <component :is="supplier" v-if="value == '供应链管理'" />
                <component :is="warehouse" v-if="value == '仓库管理'" />
                <component :is="finance" v-if="value == '项目财务'" />
                <component :is="information" v-if="value == '项目资料'" />
            </div>
        </el-tabs>
        <el-dialog v-model="isQrcode" width="500">
            <component :is="QrcodeGenerator" :size="480" :isShow="true" :content = id />
        </el-dialog>
    </div>
</template>
  
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import edit from './components/edit.vue'
import user from './user.vue'
// import scene from './scene.vue'
// import material from './material.vue'
import apply from './apply.vue'
import landlord from './landlord.vue'
import disclosure from './disclosure.vue'
import safe from './safe.vue'
import schedule from './schedule.vue'
import supplier from './supplier.vue'
import warehouse from './warehouse.vue'
import finance from './finance.vue'
import information from './information.vue'
import QrcodeGenerator from '@/components/QrcodeGenerator.vue'
import { useRouter } from 'vue-router';
import http from '../../../util/request';
const isQrcode = ref(false)
const id:any = ref(useRouter().currentRoute.value.params.id)
const value = ref('项目信息')

// const options = ['项目信息', '项目人员', '业主合同', '甲方开票申请', '项目前期策划', '动态调整项目策划', '内部经营协议', '施工组织计划','现场施工管理','材料管理','班组合同管理','劳务管理','零星材料管理','资料管理']
const options = ['项目信息', '业主合同', '项目人员', '质量管理', '安全管理', '进度管理','供应链管理','仓库管理','项目财务','项目资料',]
const ruleForm = ref<any>({})
const getData = () => {
    http.get('/project/'+id.value).then((response:any)=>{
        ruleForm.value = response.data.data
        ruleForm.value.build_date = onChangeDate(ruleForm.value.start_date,1)
        ruleForm.value.remaining_date = onChangeDate(ruleForm.value.end_date,2)
    })
}

const onChangeDate = (data:any,type:number) => {
    const _date:any = new Date(data);
    const currentDate:any = new Date(getCurrentDate())
    if(type == 1){
        const timeDiff = Math.abs(currentDate - _date);
        return Math.ceil(timeDiff / (1000 * 60 * 60 * 24));
    }

    if(type == 2){
        const timeDiff = Math.abs(_date - currentDate);
        if(_date < currentDate){
            return '-'+Math.ceil(timeDiff / (1000 * 60 * 60 * 24));
        }
        return Math.ceil(timeDiff / (1000 * 60 * 60 * 24));
    }
    
}

function getCurrentDate() {
  const date = new Date();
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}

onMounted(()=>{
    getData()
})
</script>
<style scoped>
.contents{margin:0px auto;width: 100%;height: calc(100vh - 35vh);overflow-y: scroll;}
.segmented{width: 100%;overflow-x: scroll;}
::-webkit-scrollbar { height: 5px; /* 设置滚动条宽度 */ }
::-webkit-scrollbar-thumb { background-color: #e5e5e5; border-radius: 1px; /* 设置滑块圆角 */ }
::-webkit-scrollbar-track:hover { background-color: #f0f0f0; }
::-webkit-scrollbar-thumb:hover { background-color: #555; }

/* 方法 1：使用 ::v-deep 穿透 scoped，修改标签字体大小 */
::v-deep .custom-tabs {
  /* 整体容器可自定义 */
}

/* 标签项（未激活状态） */
::v-deep .custom-tabs .el-tabs__item {
  font-size: 16px; /* 调整未激活标签字体大小 */
  padding: 0 16px; /* 可选：调整标签内边距 */
}

/* 标签项（激活状态） */
::v-deep .custom-tabs .el-tabs__item.is-active {
  font-size: 18px; /* 调整激活标签字体大小（可与未激活不同） */
  font-weight: bold; /* 可选：激活标签加粗 */
}

/* 标签下划线（激活时） */
::v-deep .custom-tabs .el-tabs__active-bar {
  height: 3px; /* 可选：调整下划线高度 */
}
</style>
